<template>
  <div class="app-container">
    <!-- 第一排搜索卡片 -->
    <el-card class="box-card">
      <el-row style="font-size: 15px; line-height: 2em; color: #909399" :gutter="60">
        <el-col :span="6">
          <a>
            <img src="https://s3.bmp.ovh/imgs/2021/11/879116e22e3cf713.jpg" width="300px" height="180px" />
          </a>
        </el-col>
        <el-col :span="18">
          <el-form :model="DemandPagedto">
            <el-col :span="12">
              <div class="search">
                需求标题：<el-input v-model="DemandPagedto.etmsDemand.demandTitle" placeholder="需求标题"></el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search">
                部门类别：
              <el-select v-model="DemandPagedto.etmsDemand.demandDept" placeholder="部门类别">
                <!-- <el-option v-for="dept in depts" :key="dept.key"  :label="dept.deptName" :value="dept.deptName"></el-option> -->
                <el-option
                v-for="item in detp"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
                >
                </el-option>
              </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search" style="margin-left:690px">
                <el-button type="primary" icon="el-icon-search" @click="getCourseListBySearch">搜索</el-button>
              </div>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二排展示 -->
    <el-tabs v-model="activeName" style="margin-top:30px;" type="border-card">
      <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
          <el-table-column label="需求标题">
            <template slot-scope="scope">
              <span>{{ scope.row.demandTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求说明">
            <template slot-scope="scope">
              <span>{{ scope.row.demandInstructions}}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门">
            <template slot-scope="scope">
              <span>{{ scope.row.demandDept }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束时间">
            <template slot-scope="scope">
              <span>{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[5,10]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="total"
          style="margin-top: 30px; margin-bottom: 20px; text-align: center;">
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>

<script>
import {findAllDemandpage} from '@/api/demand'
import {deletedDemand} from '@/api/demand'
import {findAlls} from '@/api/dept'
export default {
  data() {
  return {
     DemandPagedto:{
        page:1,
        limit:10,
        etmsDemand:{
          "demandTableId": '',
          "demandTitle": "",
          "demandInstructions": "",
          "startTime": "",
          "endTime": '',
          "demandDept": '',
          "peopleNumber": "",
          "trainingMethods": "",
          "demandReason": "",
          "otherRequirements": '',
          "status": '',
          "userId": '',
        },
     },
      total:0,
      currentPage:1,
      tableData: {},
     detp:[
        {
          "deptId": '',
          "deptName": ""
        },
      ]
    }
  },
  created: function () {
    this.findAll();
    this.selectChange();
  },
  methods: {
    findAll() {
      findAllDemandpage(this.DemandPagedto).then(
        (res) => {
          console.log(res);
          //alert("111")
          // this.demands = res.data;   
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum;
          this.total = res.data.total;
        }
      ).catch()
    
    },
    handleDetail(index, row) {
      this.$router.push({
        name:'ResearchResult',
        params:{
        demandTableId: row.demandTableId
        }
       });
       alert(row.demandTableId)
      },
      selectChange(){
      // alert("1")
      findAlls().then(res =>{
       console.log(res)
       this.detp=res.data;
      }
      ).catch()
    },
     handleSizeChange(val) {
        this.DemandPagedto.limit = val;
        getList(this.DemandPagedto).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })
      },
    handleCurrentChange(val) {
        this.DemandPagedto.page = val;
        console.log(this.DemandPagedto);
        findAllDemandpage(this.DemandPagedto).then(res => {
          console.log(res);
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
        })  
        console.log(`当前页: ${val}`);
      }, 

      getCourseListBySearch(){
        findAllDemandpage(this.DemandPagedto).then(
        (res) => {
          console.log(res);
          //alert("111")
          // this.demands = res.data;   
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum;
          this.total = res.data.total;
        }
      ).catch()
      },
      handleDelete(index, row) {
        deletedDemand(row.demandTableId);
         findAllDemandpage(this.DemandPagedto).
         then(res => {
          this.tableData = res.data.list;
          this.currentPage = res.data.pageNum
          if (res.code==200) {
                this.$message({
                  type: 'success',
                  message: '删除成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.data.message
                })
              }
        })
        console.log(index, row);
      },
  }
}
</script>

<style scoped>
  .el-input {
    width: 250px;
  }

  .box-item {
    width: 75%;
    float: right;
  }

  .field-label {
    vertical-align: middle;
  }

  .box-card {
    width: 98%;
    max-width: 100%;
    margin: 20px auto;
  }

  .search {
    margin-top: 10px;
    width: 100%;
    display: flex;
    font-size: 15px;
    line-height: 50px;
  }

</style>
